<template>
    <div class="drugContainer">

        <div class="title">药品审核</div>

        <!-- search bar 组件 -->
        <div class="searchBar">
            <SearchBar />
        </div>


        <div class="subTitle">
            <div class="pic">
                <img src="../../../../public/商品分类列表.svg" alt="">
                数据列表
            </div>
        </div>
        <el-table ref="multipleTableRef" :data="cates" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="药品名称 " />

            <el-table-column property="thumb" label="列表图" show-overflow-tooltip sortable>
                <template #default="{ row }">
                    <div>
                        <img :src="row.thumb" width="50" alt="">
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="price" label="价格" show-overflow-tooltip sortable />
            <el-table-column property="onSale" label="上下架" show-overflow-tooltip sortable>
                <template #default="{ row }">
                    <div>
                        <el-switch v-model="row.onSale" @change="switchonsale(row.id, row.onsale)" inline-prompt
                            active-text="在售" inactive-text="下架" />
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="prescription" label="是否为处方" show-overflow-tooltip sortable min-width="105" />
            <el-table-column property="checkStatus" label="审核状态" show-overflow-tooltip sortable min-width="90" />
            <el-table-column property="drugNumber" label="库存" show-overflow-tooltip sortable />

            <el-table-column label="时间" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>

            <!-- 编辑 删除 -->
            <el-table-column property="actions" label="操作" show-overflow-tooltip min-width="150">
                <!-- table子项插槽 用以获取整行的数据 -->
                <template #default="{ row }">

                    <!-- 编辑弹窗 -->
                    <el-button type="primary" @click="">编辑</el-button>


                    <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 @confirm确认后的回调 -->
                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="不了，谢谢" :icon="InfoFilled"
                        icon-color="#626AEF" title="该操作会彻底删除该分类，确定吗？" @confirm="delDrugCate(row.id)">
                        <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 -->
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>

                    </el-popconfirm>
                </template>

            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection()" type="primary">清除全选</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>


import { onMounted } from 'vue';
import SearchBar from '@/components/SearchBar.vue';
import { reactive, ref } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { getVerifyDrugLists, deleteDrugCate, postAddDrugICate, putDrugCate } from '../../../api/cate'
import { InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

// 获取药品审核列表
const cates = ref([]);
const fetchVerifyDrugLists = () => {
    getVerifyDrugLists().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            cates.value = res.data.data
        }
    })
};
onMounted(() => {
    fetchVerifyDrugLists()
});




const router = useRouter()

// 删除 
const delDrugCate = (id: any) => {
    deleteDrugCate(id).then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    router.go(0)
                }
            })
        }
    })
}
// 按钮 参数传参成功
const switchonsale = (id: any, onsale: any) => {
    putDrugCate({
        id,
        onsale
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 2000,
                onClose: () => {
                    // router.go(0)
                }
            })
        }
    })
}




// 表格相关

interface User {
    date: string
    name: string
    grade: string,
    status: string,
    desc: string,
    roleUpload: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


</script>

<style lang="scss" scoped>
.drugContainer {
    padding-top: 15px;
    padding-left: 15px;
}

.title {
    padding-bottom: 15px;
    padding-top: 3px;

    font-size: 30px;
    font-weight: bold;

}

.subTitle {
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    background-color: #F2F2F2;
    height: 45px;


    .pic {
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            padding-right: 10px;
        }
    }

    .el-button {
        margin-right: 140px;
        margin-top: 7px;

        border-color: red;
        background-color: #fff;
        color: black;
    }
}
</style>
